<template>
    <!-- Footer复用策略: 命名视图  -->
    <div class="footer">
      <van-tabbar route>
        <!-- <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/category" icon="search">分类</van-tabbar-item>
        <van-tabbar-item replace to="/cart" icon="search">购物车</van-tabbar-item>
        <van-tabbar-item replace to="/mine" icon="search">我的</van-tabbar-item> -->

        <van-tabbar-item v-for="item,index in FooterList" :key="index" :replace="item?.replace" :to="item?.path" :icon="item?.icon">{{ item.label }}</van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { useAuthStore } from '@/stores/auth';
    let AuthStore = useAuthStore();

    const FooterList = ref([{
        label:"首页",
        icon:"home-o",
        path:"/",
        replace:false,
    },{
        label:"分类",
        icon:"search",
        path:"/category",
        replace:false,
    },{
        label:"购物车",
        icon:"search",
        path:"/cart",
        replace:false,
    },{
        label: AuthStore.isLogin ? "我的":"未登录",
        icon:"search",
        path:"/mine",
        replace:false,
    }])
</script>

<style scoped>

</style>